<template>
    <div>
        <wd-header>
            <span class="iconfont" @click="goback" slot="left">&#xe697;{{title}}-{{version}}</span>
        </wd-header>
        <div class="search">
            <input type="text" @click="search" placeholder="请输入单词,立即查询">
        </div>
        <div class="unitlist">
            <ul>
                <transition-group enter-active-class="animated fadeIn">
                    <router-link tag="li" v-for="(item,index) in lists" 
                                 :key="index" 
                                 :to="{
                                       name:'unitwordslist',
                                         params:{
                                           classid:item.classId,
                                           unitid:item.unitId
                                         } 
                                      }"
                    >
                        <p class="left">
                            <span>{{item.unitName}}</span>
                            <span>{{item.wrodNum}}</span>
                            <span>个生词</span>
                        </p>
                        <span class="iconfont">&#xe6a8;</span>
                    </router-link>
                </transition-group>
            </ul>
        </div>
        <div class="footer" @click="topay" v-show="btnshow==0">
            <button>点击订阅本书所有单词</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'singlebook',
    data() {
        return {
            lists:null,
            btnshow:null,
            auth: JSON.parse(localStorage.user),
            url: 'http://www.jydsapp.com/jydsApi/api/h5/study/getUnitList'
        }
    },
    computed: {
        classid() {
            return this.$store.state.word_indexto_singlebook_or_buy_data.classid //从列表进来的数据
        },
        title(){
            return this.$store.state.word_indexto_singlebook_or_buy_data.title
        },
        version(){
            return this.$store.state.word_indexto_singlebook_or_buy_data.content
        }
    },
    beforeRouteLeave(to, from, next) {
        let commonData = {  //单元列表到单元单词数据
            classid: to.params.classid,
            unitid: to.params.unitid,
        }
        this.$store.commit('saveWordSingleBookToUnitWordsListData', commonData)
        next()
    },
    beforeRouteEnter(to, from, next) {
        if (from.name == 'seriesword') { //保存从哪个路由进入的singleboook以确保返回时的路径正确
            next(vm => {
                vm.$store.commit('savePathFrom', '/seriesword')
            })
        } else if (from.name == 'index') {
            next(vm => {
                vm.$store.commit('savePathFrom', '/')
            })
        } else if(from.name == 'mylesson'){
            next(vm=>{
                vm.$store.commit('savePathFrom','/mylesson')
            })
        } else {
            next()
        }
    },
    created() {
        this.getData()
    },
    methods: {
        topay() {
            this.$router.push({
                name: 'wordpay'
            })
        },
        goback() {
            let routeData = this.$store.state.which_path_from   //保存从哪个路由进入的singleboook以确保返回时的路径正确
            this.$router.push(routeData)
        },
        search() {
            this.$router.push('/searchword')
        },
        getData() {
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","classId":"${this.classid}"}`
            let toast = this.$Toast({
                content: '加载中…',
                autoClose:false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    toast.close()
                    this.lists = JSON.parse(res.data).unitList
                    this.btnshow = JSON.parse(res.data).payType
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                    this.$Toast({
                        content: res.message
                    })
                }
            }).catch((err) => {
                
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.animated {
    animation-duration: .5s;
}

.search {
    display: flex;
    input {
        flex: 1;
        padding: 0.37037rem;
        border: 1px solid #eee;
    }
}

.unitlist {
    li {
        display: flex;
        justify-content: space-between;
        padding: 0.37037rem;
        border-bottom: 1px solid #eee;
        align-items: center;
        .left {
            span:nth-child(1) {
                margin-right: 0.37037rem;
            }
        }
    }
    .iconfont {
        color: #555;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #fff;
    padding: .1rem 0;
    button {
        width: 95%;
        height: 1.3rem;
        line-height: 1.3rem;
        font-size: .444444rem;
        background: #ff6633;
        color: #fff;
        border-radius: 5px;
    }
}
</style>
